<template>
  <view class="page-content">
    <view v-if="experienceList.length">
      <u-card
        v-for="item in experienceList"
        :key="item.expId"
        border-radius="32"
        @click="cellClick(currTitle, currExpType, 'edit', item)"
      >
        <template #head>
          <view class="head-box">
            <view class="title u-font-32">{{
              item.certificationType ||
              item.expOrg ||
              item.expName ||
              item.therapeuticType
            }}</view>
            <view class="sub-title">
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view>
        </template>
        <describeVue
          slot="body"
          :data="item"
          :column="experienceColumn[currExpType]"
          :empty-value="'无'"
        >
          <template #mainFlag="{ prop, data }">
            {{ data[prop] ? '是' : '否' }}
          </template>
          <template #fileList="{ prop, data }">
            <updateFileVue
              v-if="data[prop] && data[prop].length > 0"
              v-model="data[prop]"
              :onlyShow="true"
            ></updateFileVue>
            <text v-else>无</text>
          </template>
        </describeVue>
      </u-card>
    </view>
    <view v-else class="center-box">
      <u-empty text="暂无数据" mode="data"></u-empty>
    </view>
  </view>
  <view class="btn-box">
    <u-button
      shape="circle"
      type="primary"
      plain
      @click="cellClick(currTitle, currExpType, 'add')"
      >添加</u-button
    >
  </view>
</template>
<script lang="ts" setup>
import { getUserExperiencelist } from '@/api/modules/user';
import { useUserStoreWidthOut } from '@/stores/user';
import { experienceColumn } from '../data';
import { onLoad, onShow } from '@dcloudio/uni-app';
import describeVue from '@/components/describe.vue';
import updateFileVue from '@/components/updateFile.vue';
import { useBack } from '@/hooks/useBack';

const asyncUser = useUserStoreWidthOut();
const userInfo: any = asyncUser.getUserInfo;

const experienceList = ref<any[]>([]);
const reloadTableData = () => {
  experienceList.value = [];
  getUserExperiencelist({ userId: userInfo.userId })
    .then((res: any) => {
      experienceList.value = res.filter(
        (el: any) => el.expType === currExpType.value
      );
      experienceList.value.forEach((el) => {
        if (el.fileList && el.fileList.length) {
          el.fileList.forEach((item: any) => {
            item.uid = item.platformFileId;
            item.name = item.fileName;
          });
        } else {
          el.fileList = [];
        }
      });
    })
    .catch(() => {
      experienceList.value = [];
    });
};

const cellClick = (
  title: string,
  expType: number,
  actionType: string,
  data?: any
) => {
  (uni as any).$Router.push({
    name: 'editExperienceDetails',
    params: {
      title,
      expType,
      actionType,
      expId: data?.expId,
    },
  });
};

const currExpType = ref();
const currTitle = ref();
onLoad(() => {
  const { expType, title } = (uni as any).$Router.getQuery();
  currExpType.value = expType;
  currTitle.value = title;
  uni.setNavigationBarTitle({
    title,
  });
});

useBack(() => reloadTableData());

onMounted(() => {
  reloadTableData();
});
</script>
<style lang="scss">
page {
  // width: 100%;
  // height: 100%;
  // box-sizing: border-box;
  // position: relative;
  // padding-bottom: env(safe-area-inset-bottom);
}
.page-content {
  padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
  width: 100%;
  height: 100%;
}
.btn-box {
  bottom: 0;
  width: 100%;
  background-color: #fff;
  padding: 20rpx;
  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
  position: fixed;
  // bottom: 0;
  z-index: 10;
}
.head-box {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    font-weight: bold;
  }
}
.center-box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
